
<template>
  <div class="content"> 
    <bx-content>
      <bxFilter ref="filter" :row="4" :config="config">
        <div slot="name" class="name">
          查询
        </div>
        <div slot="custom">2222</div>
        <div slot="btn" class="btn">
          <el-button type="primary" @click="link">查询</el-button>
          <el-button type="primary" @click="setValue">重置</el-button>
        </div>
      </bxFilter>
    </bx-content>
    <div class="btn">
      <el-button type="primary" @click="link">查询</el-button>
      <el-button type="primary" @click="setValue">重置</el-button>
    </div>
    <div class="table">
      <h3>基础表格</h3>
      <bxTable :data="tableData">
        <vxe-table-column type="seq" width="60" title="序号" />
        <vxe-table-column field="name" title="Name" />
        <vxe-table-column field="sex" title="Sex" />
        <vxe-table-column field="age" title="Age" />
      </bxTable>
    </div>
    <div class="table">
      <h3>表格(排序，筛选)</h3>
      <bxTable :data="tableData1">
        <vxe-table-column type="seq" width="60" title="序号" />
        <vxe-table-column type="checkbox" title="ID" width="140" />
        <vxe-table-column field="name" title="Name" sortable />
        <vxe-table-column field="sex" title="Sex" :filters="sexList" :filter-multiple="false" :formatter="formatterSex" />
        <vxe-table-column
          field="age"
          title="Age"
          sortable
          :filters="[{label: '大于16岁', value: 16}, {label: '大于26岁', value: 26}, {label: '大于30岁', value: 30}]"
          :filter-method="filterAgeMethod"
        />
        <vxe-table-column field="address" title="Address" show-overflow />
      </bxTable>
    </div>
    <div class="table">
      <h3 @click="add(tableData2[2])">表格(二级表头,双击编辑)</h3>
      <bxTable ref="t" :data="tableData2" :config="{'edit-config':{trigger: 'dblclick', mode: 'row'}}">
        <vxe-table-column type="seq" width="60" />
        <vxe-table-colgroup title="分组1">
          <vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text'}}" />
          <vxe-table-column field="role" title="Role" :edit-render="{name: 'input', attrs: {type: 'text'}}" />
          <vxe-table-column field="sex" title="Sex" :edit-render="{name: '$select', options: sexList}" />
        </vxe-table-colgroup>
        <vxe-table-colgroup title="分组2">
          <vxe-table-column field="num1" title="Number" :edit-render="{name: '$input', props: {type: 'number'}}" />
          <vxe-table-column field="date12" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}" />
          <vxe-table-column field="date13" title="Week" :edit-render="{name: '$input', props: {type: 'week'}}" />
        </vxe-table-colgroup>
        <vxe-table-column field="address" title="Address" :edit-render="{name: 'textarea'}" />
      </bxTable>
      <div style="text-align: right;padding-top:10px">
        <el-pagination
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="9"
        />
      </div>

    </div>
    <div class="table">
      <h3>高级表格(grid)</h3>
      <bxGrid ref="xGrid" :config="gridOptions">
        <template slot="toolbar_buttons">
          <vxe-button @click="gridOptions.align = 'left'">居左</vxe-button>
          <vxe-button @click="gridOptions.align = 'center'">居中</vxe-button>
          <vxe-button @click="gridOptions.align = 'right'">居右</vxe-button>
        </template>
        <template slot="operate" slot-scope="{row}">
          <el-button icon="el-icon-delete" title="删除" type="danger" circle @click="removeRowEvent(row)" />
          <el-button icon="el-icon-view" title="查看" type="warning" circle />
          <el-button icon="el-icon-s-tools" title="设置" type="success" circle />
        </template>
      </bxGrid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      config: [ // filter配置
        {
          type: 'input',
          key: 'q',
          slot: 'name',
          props: {
            label: '输入框',
            required: true,
            validator: { text: '不能为空', reg: 'required' }
          }
        },
        {
          type: 'select',
          key: 'w',
          props: {
            label: '下拉框',
            required: true,
            validator: { text: '不能为空', reg: 'required' }
          }
        },
        {
          type: 'date',
          key: 'e',
          props: {
            label: '日期',
            required: true,
            validator: { text: '不能为空', reg: 'required' }
          }
        },
        {
          type: 'date',
          key: 'e1',
          props: {
            label: '日区间',
            dateType: 'daterange',
            required: true,
            validator: { text: '不能为空', reg: 'required' }
          }
        },
        {
          type: 'date',
          key: 'e2',
          props: {
            label: '月区间',
            dateType: 'monthrange',
            required: true,
            validator: { text: '不能为空', reg: 'required' }
          }
        },
        {
          type: 'date',
          key: 'e3',
          span: 12,
          props: {
            label: '年区间',
            dateType: 'yearrange',
            required: true,
            validator: { text: '不能为空', reg: 'required' }
          }
        },
        {
          type: 'cascader',
          key: 'r',
          props: {
            label: '级联',
            required: true,
            validator: { text: '不能为空', reg: 'required' }
          }
        },
        {
          type: 'checkbox',
          key: 't',
          span: 18,
          props: {
            label: 'checkbox'
          }
        },
        {
          type: 'radio',
          key: 'y',
          span: 12,
          props: {
            label: 'radio'

          }
        }
      ],
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }
      ],
      tableData1: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' }
      ],
      tableData2: [
        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '0', sex2: ['0'], num1: 40, age: 28, address: 'Shenzhen', date12: '', date13: '' },
        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Designer', sex: '1', sex2: ['0', '1'], num1: 1, age: 22, address: 'Guangzhou', date12: '', date13: '2020-08-20' }
      ],
      gridOptions: {
        border: true,
        resizable: true,
        showOverflow: true,
        height: 300,
        align: 'left',
        toolbarConfig: {
          slots: {
            buttons: 'toolbar_buttons'
          }
        },
        columns: [
          { type: 'seq', width: 50 },
          { field: 'name', title: 'name' },
          { field: 'sex', title: 'sex', showHeaderOverflow: true },
          { field: 'address', title: 'Address', showOverflow: true },
          { title: '操作', width: 200, slots: { default: 'operate' }}
        ],
        data: [
          { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 0, address: 'Shenzhen' },
          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }
        ]
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 20
      },
      sexList: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ]
    }
  },
  created() {
  },
  methods: {
    async add(row) {
      return
    },
    formatterSex({ cellValue }) {
      const item = this.sexList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    filterAgeMethod({ value, row, column }) {
      return row.age >= value
    },
    link() {
      this.$refs.filter.allVerification()
    },
    setValue() {
      this.$refs.filter.setAllValue({
        q: 1,
        w: ['选项9'],
        e: '2020-02-01',
        e1: ['2020-02-01', '2020-02-01'],
        e2: ['2020-02', '2020-02'],
        e3: ['2020', '2020'],
        r: ['2-0', '2-1', '1-2'],
        t: ['3', '4'],
        y: '选项9'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding: 10px;
  .btn{
    text-align: center;
  }
  .table{
    margin-top: 20px;
    padding: 0 10px;
    h3{
      padding-bottom: 10px;
    }
  }
  .name{
    position: absolute;
    top:0;
    right:-35px;
    cursor: pointer;
    color: #ccc;
  }
}
</style>
